<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>my blog</title>
	<link rel="stylesheet" type="text/css" href="navigator.css">
	<link rel="stylesheet" type="text/css" href="leftList.css">
	<link rel="stylesheet" type="text/css" href="bottom.css">
	<link rel="stylesheet" type="text/css" href="page.css">
</head>
<body>
	<div id="navigator">
		<div id="header">
			<a href="index.html">
				<p id="logo">Blog</p>
			</a>
			<a href="index.html">
				<p class="link">首页</p>
			</a>
			<a href="archive.html">
				<p class="link">文章</p>
			</a>
			<a href="about.html">
				<p class="link">关于</p>
			</a>
			<a href="#">
				<p class="link">登录</p>
			</a>
		</div>
	</div>

	<div class="main" id="main-box">
		<div class="nav">
			<div class="leftList">
				<div class="article">
					<div id="pic"></div>
					<p id="welcome">Welcome to my blog</p>
				</div>


				<div class="article">
					<p class="listTitle">置顶文章</p>
					<a href="firstpage.html">
						<p class="articleTitle">第一篇文章</p>
					</a>
				</div>



				<div class="article">
					<p class="listTitle">最近文章</p>
					<a href="firstpage.html">
						<p class="articleTitle">第一篇文章</p>
					</a>

					<a href="#">
						<p class="articleTitle">第二篇文章</p>
					</a>
				</div>



				<div class="article">
					<p class="listTitle">跳转站</p>
					<a href="https://github.com/besthunterhj">
						<p class="articleTitle">我的Github</p>
					</a>	
				</div>
			</div>


			<div id="article-index">
				<div id="article-nav">
					<h3 class="appendix">About Me</h3>
					<p class="introduction">
						这是我的第一个自建个人博客，参考了gitpage的设计模板，目前还在施工中……
					</p>
					<p class="introduction">
						以后会常在这个博客中写一写日常、学习心得等，希望自己能够坚持下来。
					</p>
					<p class="introduction">
						今日随笔（2020.1.7）：关于css3：弄了很久的导航栏动画效果，结果发现是要用到css3的两个属性
						<span style="color: #ff0000">transform和transition</span>
						//突然发现有必要开一个记录每天笔记的专栏
					</p>
					<p class="introduction">
						transform：进行2d，3d变化，其中translate(x,y)是让某节点向x轴、y轴平移x和y;
						transition：让节点的某css属性的变化不是一瞬间改变，而是在一定时间内完成即可，具体时间由编程者决定。
					</p>
					<p class="introduction">
						今日随笔（2020.1.25）：关于python：python也是需要使用到json格式的，使用json可以很方便地实现文件输入、输出，
						现希望将相关代码上传到github中，同时在使用python测试类时，setUp函数的目的是不需要用户在main函数中手动实例化
						对象，而是在setUp函数中系统机制自动实例化，同时运行Test类（需要继承unittest.TESTCASE）中所有test开头的函数
					</p>
					<p class="introduction">
						今日随笔（2020.2.6）：关于AJAX：今天又系统地看了一遍AJAX教程，其实基础AJAX是很简单的，特别是调用jQuery时，
						通过复习，我似乎感悟到了——JSON的功能十分强大，它既能够供python使用，用于文件读取与存储；又是作为前端和后台
						的桥梁（对于前端，JS中有JSON.parse()函数来解析JSON格式的对象和数组；对于后台，PHP中有json_encode()函数将
						PHP对象或数组转化为JSON对象或数组，又有json_decode()函数将JSON格式的对象与数组转化为PHP语言下的对象与数组。）
					</p>
				</div>	
			</div>
		</div>	
	</div>

	<div id="bottom">
		<div id="author">
			©2020 besthunterhj.github.io , Powered by 
			<a href="https://github.com/">
				<span class="thanks">Github</span>
			</a>
			<a href="https://github.com/besthunterhj">
				<span class="thanks">besthunterhj</span>
			</a>
		</div>
	</div>
</body>
<script type="text/javascript">
	let main = document.getElementById("main-box");
	let pic = document.getElementById("pic");

	pic.onclick = function()
	{
		window.open("https://besthunterhj.github.com/187.jpg");
	}

	let navigator = document.getElementById("navigator");
	let beforeScroll = document.documentElement.scrollTop;

	window.onscroll = function()
	{
		let afterScroll = document.documentElement.scrollTop;
		if (afterScroll > 57 && afterScroll - beforeScroll < 0) 
		{
			navigator.className = "fix";
			main.style.margin = "67px 0 0 0"
		}
		else
		{
			navigator.className = "none";
			main.style.margin = "0";
		}

		beforeScroll = afterScroll;
	}
</script>
</html>
